﻿
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<table class="layui-table">
    <tr>
        <td>房型</td>
        <td> @* 房间信息 *@ </td>
    </tr>
    <tbody id="data">
       @*  <tr>
            <td> 
                <img  style="width:30px;height:30px;" src="~/imgs/03a1082a-901b-43c2-a25d-51d27f4887051.png" />
                <br />总套套房  VR看房 </td>
            <td>

                <table class="layui-table">
                    <tr><td>房间名称</td><td>早餐份数</td><td>单价</td></tr>
                    <tbody id="room">
                        <tr><td>总统222</td><td>6</td><td>1999.00</td></tr>
                        <tr><td>总统666</td><td>6</td><td>1999.00</td></tr>
                        <tr><td>总统888</td><td>6</td><td>1999.00</td></tr>
                    </tbody>
                 </table>

            </td>
        </tr> *@
        
    </tbody>
   
</table>

<script>

    $(function () {
        showRoomType();
    });
    function showRoomType() { 
        $.ajax({
            url: 'https://localhost:7061/api/RoomType/GetRoomTypes',
            type:'get',   
            // async:false,
            success: function (res) {
                var tr = '';
                $(res).each(function (i,obj) { 
                    tr += `
                         <tr>
                            <td>
                                 <img  style="width:100px;height:100px;" src="${obj.imgUrl}" />
                                 <br /> ${obj.name}  VR看房 </td>
                            <td>

                                <table class="layui-table">
                                    <tr><td>房间名称</td><td>早餐份数</td><td>单价</td></tr>
                                    <tbody id="room${obj.id}">
                                       
                                       
                                    </tbody>
                                 </table>

                                </td>
                            </tr>
                    
                    `;
                    //obj.id  就是房型id
                    showRoom(obj.id);
                });
                $("#data").html(tr);
                
            }

        });
    }
    //通过房型id找房间
    function showRoom(id) {
        $.ajax({
            url: 'https://localhost:7061/api/RoomInfo/GetRooms?roomTypeId=' + id,
            type: 'get',
            success: function (res) {
                var tr = '';
                $(res).each(function (i, obj) {
                    tr += ` <tr><td>${obj.roomName}</td><td>${obj.breakFastNum}</td><td>${obj.price}</td></tr>`;
                });
                $("#room" + id).html(tr);
            }
        });
    }
</script>


